<template>
	<view class="page" style="padding: 40rpx;">
		
		<view v-for="(item,index) in uiList" :key="index">
			<view class="flex-row row-lineConter" style="font-size: 30rpx;  padding: 24rpx 0rpx;">
			
				<view class="flex-row blockTextColor"
					style=" font-size: 30rpx; flex-shrink: 0; margin-right: 20rpx; font-weight: bold;">
					{{item.title}}
				</view>
			
				<!-- 头像 -->
				<view v-if="index == 0" class="row-lineConter" style="flex-grow: 1; flex-direction: row-reverse;">
					<view style="margin-left: 16rpx;">
						<button class="button-custom zsConter"
						    open-type="chooseAvatar" 
						    @chooseavatar="onChooseAvatar">
						    更换头像
						  </button>
					</view>
					
					<image class="headerImage" v-if="item.value == null" :src="headerImageUrl" mode=""></image>
					<image class="headerImage" v-if="item.value != null" :src="item.value" mode=""></image>
					
				</view>
				<!--  -->
				<view v-if="index != 0 && index !=2" @click="clickRow(index)" class="row-lineConter" style="flex-grow: 1; flex-direction: row-reverse;">
					<view class="" style="">
						<uni-icons type="right" size="18" color="rgb(153, 153, 153)" ></uni-icons>
					</view>
					<view class="blockTextColor" style="margin-right: 10rpx;">
						{{item.value}}
					</view>
				</view>
				<!--  -->
				<view v-if="index == 2"  class="row-lineConter" style="flex-grow: 1; flex-direction: row-reverse;">
					<view @click="clickCopy(item.value)" class="button-custom " style="margin-left: 16rpx;">
						复制
					</view>
					<view class="blockTextColor" style="margin-right: 10rpx;">
						{{item.value}}
					</view>
					
				</view>
				
				
			</view>
			<!--  -->
			<view class="lineStyle">
			
			</view>
		</view>
		<view @click="click()"  class="signOutBtn zsConter mainBgColor">
			退出登录
		</view>
		
		<uni-popup ref="popup" type="center" >
			<view class="column-center" style="width: 500rpx;  margin: 0rpx 30rpx; align-items: center; border-radius: 8rpx; background-color: white; padding: 30rpx 40rpx; ">
				<view class="zsConter">
					<view class="blockTextColor" style="font-size: 40rpx; margin-right: 20rpx; font-weight: bold;">
						昵称：
					</view>
					<input type="text" class="blockTextColor" placeholder="请输入昵称" v-model="user.nickname" @input="onInput" />
					
					
				</view>
				<view @click="popupClick(false)" class="signOutBtn zsConter mainBgColor" style="width: 50%; margin-top: 30rpx; height: 60rpx;">
					确定
				</view>
				<view @click="popupClick(true)" class="typeLabel zsConter " style="margin-top: 30rpx; height: 55rpx;">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerImageUrl:'https://mp-35bd1c1b-8095-44b6-b494-c65e6d85fd9c.cdn.bspapp.com/appConfigure/defaultHeaderImage.jpeg',
				
				uiList:[
					{
						title:'头像',
						value:null,
					},
					{
						title:'昵称',
						value:null,
					},
					{
						title:'ID',
						value:null,
					},
					{
						title:'积分',
						value:null,
					},
					{
						title:'会员类型',
						value:null,
					},
				],
				user:{}
			}
		},
		onLoad() {
			this.setData();
		},
		
		methods: {
			getNickname(){
				var item = this.uiList[1]
				return item.value
			},
			setData(){
				this.user = this.$userInfo;
				this.user.nickname = '微信用户'
				var index = 0;
				console.log('登录信息==',this.$userInfo)
				this.uiList.forEach(item=>{
					if(index == 0){
						item.value = this.user.headerImageUrl;
					} else if(index == 1){
						item.value = this.user.nickname ?? '微信用户'
					} else if(index == 2){
						item.value = this.user.openId;
					}  else if(index == 3){
						item.value = this.user.integral;
					} else if(index == 4){
						item.value = this.user.memberType=='0'? '普通用户':'会员';
					}
					index++;
					console.log('index==',index,item.value)
				});
			},
			onChooseAvatar(e) {
			  var item = this.uiList[0]
			  var filePath =  e.detail.avatarUrl;
			  this.$publicApi.uploadImage(filePath).then(imageUrl => {
			  	item.value = imageUrl;
				this.$userInfo.headerImageUrl = item.value;
				this.update_user_data();
			  }).catch(err => {
			  			  
			  });
			 
			},
			onInput(e){
				// e.detail.text
				var item = this.uiList[1]
				item.value = e.detail.value;
				this.user.nickname = item.value;
			},
			clickRow(index){
				if(index==1){
					this.$refs.popup.open('center')
				}
			},
			popupClick(cancel){
				if(cancel == false){
					this.update_user_data();
				}
				this.$refs.popup.close();
			},
			clickCopy(text){
				// 调用API复制文本
				uni.setClipboardData({
				    data: text,
				    success: function () {
				        console.log('复制成功');
						uni.showToast({
							title:'复制成功'
						})
				    },
				    fail: function (err) {
				        console.error('复制失败', err);
						uni.showToast({
							title:'复制失败'
						})
				    }
				});
			},
			click(){
				var that = this;
				uni.removeStorage({
					key: 'userInfo',
					success: function (res) {
						console.log('success');
						uni.clearStorage();
						that.$removeUserInfo()
						that.backClick();
					},
					fail(res) {
						console.log('fail==',res);
					}
				});
			},
			backClick(){
				uni.navigateBack();
			},
			update_user_data(){
				var that  = this;
				var info = {};
				info.headerImageUrl = this.$userInfo.headerImageUrl;
				info.nickname = this.$userInfo.nickname;
				info.openId = this.$userInfo.openId;
				info._id = this.$userInfo._id;
				info.integral = this.$userInfo.integral;
				info.memberType = this.$userInfo.memberType;
				
				this.$uniCloudApi.update_user_data(info).then(res=>{
					that.$showToast('修改成功');
					that.saveLocalUserInfo(info);
					
				}).catch(err=>{
					// this.$showToast('修改成功');
					console.log('更新失败=',err)
					// this.$showToast(err);
				});
			},
			saveLocalUserInfo(userInfo){
				var that = this;
				uni.setStorage({
					key: 'userInfo',
						data:userInfo,
					success(lres) {
						console.log('存本地成功=',lres)
						that.$setUserInfo(userInfo);
					},
					fail(failres) {
						console.log('存本地失败=',failres)
					}
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	}
	.headerImage{
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
	.signOutBtn {
		
		width: 100%;
		color: white;
		font-size: 36rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-top: 100rpx;
		box-shadow: 0rpx 0rpx 20rpx rgb(52, 116, 246);
		
	}
	/* 设置按钮的宽度、高度、背景颜色和文本颜色 */
	.button-custom {
	  height: 40rpx; /* 按钮高度 */
	  background-color: rgb(52, 116, 246); /* 按钮背景颜色 */
	  color: white; /* 按钮文本颜色 */
	  border: none; /* 移除边框 */
	  border-radius: 10rpx; /* 按钮圆角 */
	  font-size: 28rpx; /* 文本大小 */
	  padding: 0rpx 20rpx;
	  margin-right: 20rpx;
	}
	
	.typeLabel{
		width: 45%;
		color: white;
		font-size: 30rpx;
		padding: 0rpx 10rpx;
		border-radius: 30rpx;
		color: rgba(153, 153, 153, 1);
		// background-color: royalblue;
		border: 1px solid rgba(153, 153, 153, 1); /* 设置1像素的黑色实线边框 */
	}

</style>
